<script setup lang="ts">
  import { ref, toRefs, reactive } from 'vue'
  import { ElMessage } from 'element-plus'
  import { reservationTime } from '@/api/order'
  import HButton from '@/components/common/button/HButton.vue'
  import HModal from '@/components/common/Modal/HModal.vue'
  import useFormValidateService from '@/services/common/formValidate/useFormValidate'

  const props = defineProps({
    timeDialog: Boolean,
    workId: [String, Object],
  })

  /**
   * 使用表单验证服务
   */
  const { handleFormValidate, resetFormValidateResult, formValidateResult } =
    useFormValidateService(['date', 'reservationStartTime', 'reservationEndTime'])

  const { workId, timeDialog } = toRefs(props)
  const emits = defineEmits(['time-dialog', 'update-list', 'refreshOperationLogList'])
  const loading = ref(false)

  const formRef = ref()
  const ruleForm = reactive({
    date: '',
    remark: '',
    reservationStartTime: '',
    reservationEndTime: '',
    workId: workId.value,
  })
  const rules = reactive({
    date: [{ required: true, message: '请选择预约上门日期！', trigger: ['blur', 'change'] }],
    reservationStartTime: [
      { required: true, message: '请选择预约上门时间！', trigger: ['blur', 'change'] },
      {
        validator: (rule, value, callback) => {
          if (!ruleForm.reservationEndTime) {
            callback('请选择预约上门时间！')
          } else {
            callback()
          }
        },
        trigger: ['blur', 'change'],
      },
    ],
    reservationEndTime: [
      { required: true, message: '请选择预约上门时间！', trigger: ['blur', 'change'] },
    ],
  })

  // 保存
  const onSave = () => {
    formRef.value.validate(async (valid) => {
      if (valid) {
        loading.value = true
        let data: any = ruleForm
        const res = await reservationTime(data)
        if (res.data.isError)
          ElMessage({
            message: res.data.message,
            type: res.data.success ? 'success' : 'error',
            duration: 4000,
            offset: 200,
            showClose: true,
          })
        if (res.data.success) {
          ;(ruleForm.date = ''),
            (ruleForm.remark = ''),
            (ruleForm.reservationStartTime = ''),
            (ruleForm.reservationEndTime = ''),
            emits('update-list')
          onCancel()
        }
        loading.value = false
      } else {
        return false
      }
    })
  }

  const onCancel = () => {
    formRef.value.resetFields()
    ruleForm.date = ''
    ruleForm.remark = ''
    ruleForm.reservationStartTime = ''
    ruleForm.reservationEndTime = ''
    resetFormValidateResult()
    emits('time-dialog')
  }
</script>

<template>
  <HModal :model-value="timeDialog" title="预约时间" @close="onCancel" width="auto">
    <div v-loading="loading" element-loading-text="加载中...">
      <el-form
        label-width="94"
        ref="formRef"
        :model="ruleForm"
        :rules="rules"
        @validate="handleFormValidate"
        class="modal_form_content reservation_time_form"
      >
        <!-- 预约上门日期 -->
        <el-form-item
          label="预约上门日期"
          prop="date"
          class="form_date_picker_item"
          :class="{ error_form_item: !formValidateResult['date'] }"
        >
          <el-date-picker
            v-model="ruleForm.date"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="预约上门日期"
            size="small"
            class="date_picker"
          />
        </el-form-item>

        <!-- 预约上门时间 -->
        <el-form-item
          label="预约上门时间"
          prop="reservationStartTime"
          class="form_time_range_picker_item"
          :class="{ error_form_item: !formValidateResult['reservationStartTime'] }"
        >
          <div class="time_range_picker_container">
            <el-time-select
              v-model="ruleForm.reservationStartTime"
              :max-time="ruleForm.reservationEndTime"
              placeholder="开始时间"
              start="06:00"
              step="01:00"
              end="22:00"
              class="time_picker"
            />
            <div class="separator">~</div>
            <el-time-select
              v-model="ruleForm.reservationEndTime"
              :min-time="ruleForm.reservationStartTime"
              placeholder="结束时间"
              start="06:00"
              step="01:00"
              end="22:00"
              class="time_picker"
            />
          </div>
        </el-form-item>

        <!-- 预约留言 -->
        <el-form-item label="预约留言">
          <el-input
            v-model="ruleForm.remark"
            maxlength="200"
            placeholder="请输入预约留言"
            show-word-limit
            type="textarea"
            resize="both"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footerRight>
      <HButton isModal type="primary" @click="onSave">保存</HButton>
      <HButton isModal @click="onCancel"> 取消 </HButton>
    </template>
  </HModal>
</template>

<style lang="scss" scoped>
  .reservation_time_form {
    :deep(.el-textarea) {
      .el-textarea__inner {
        min-height: 75px !important;
        max-height: 200px !important;
        min-width: 250px !important;
        max-width: 450px !important;
      }
  }
  }
</style>
